<template>
  <div id="wrapper">
    <h1 class="title">上传有效身份证件</h1>
    <p class="msg">根据国家相关规定，请完成实名认证</p>
    <!-- 正面 -->
    <div class="imgBox">
      <div class="top">
        <div class="name">本人身份证正面照片</div>
        <div class="upLoadOrAgain">
          <van-icon name="add" class="iconMore" />
          拍照上传
        </div>
      </div>
      <div class="upload-btn common mb_10 zheng" v-if="!cardFront.isShow">
        <label>
          <input
            type="file"
            @change="getFileData"
            ref="file"
            accept="image/*"
            capture="camera"
          />
        </label>
      </div>
      <div class="img-list-item common mb_10" v-if="cardFront.isShow">
        <img :src="cardFront.src" class="common" />
        <!-- <van-icon name="clear" class="del-img" @click="forkImage"/> -->
        <i class="del-img" @click="forkImage(1)"></i>
      </div>
    </div>
    <!-- 背面 -->
    <div class="imgBox">
      <div class="top">
        <div class="name">本人身份证背面照片</div>
        <div class="upLoadOrAgain">
          <van-icon name="add" class="iconMore" />
          拍照上传
        </div>
      </div>
      <div class="upload-btn common mb_10 fan" v-if="!cardBack.isShow">
        <label>
          <input
            type="file"
            @change="getFileData1"
            ref="file1"
            accept="image/*"
            capture="camera"
          />
        </label>
      </div>
      <div class="img-list-item common mb_10" v-if="cardBack.isShow">
        <img :src="cardBack.src" class="common" />
        <!-- <van-icon name="clear" class="del-img" @click="forkImage"/> -->
        <i class="del-img" @click="forkImage(2)"></i>
      </div>
    </div>
    <!-- 行驶证 -->
    <div class="imgBox">
      <div class="top">
        <div class="name">行驶证照片</div>
        <div class="upLoadOrAgain">
          <van-icon name="add" class="iconMore" />
          拍照上传
        </div>
      </div>
      <div class="upload-btn common mb_10 vin" v-if="!licenseFront.isShow">
        <label>
          <input
            type="file"
            @change="getFileData2"
            ref="file2"
            accept="image/*"
            capture="camera"
          />
        </label>
      </div>
      <div class="img-list-item common mb_10" v-if="licenseFront.isShow">
        <img :src="licenseFront.src" class="common" />
        <!-- <van-icon name="clear" class="del-img" @click="forkImage"/> -->
        <i class="del-img" @click="forkImage(3)"></i>
      </div>
    </div>

    <div class="up" @click="uploadFile">确认提交</div>
  </div>
</template>

<script>
import upload from "@/utils/upload.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      src: "",
      isShow: false,
      imgList: {
        cardFront: "",
        cardBack: "",
        licenseFront: "",
      },
      cardBack: {
        src: "",
        isShow: false,
      },
      cardFront: {
        src: "",
        isShow: false,
      },
      licenseFront: {
        src: "",
        isShow: false,
      },
      toast1: null,
    };
  },
  methods: {
    // 删除
    forkImage(id) {
      if (id == 1) {
        this.cardFront.src = "";
        this.cardFront.isShow = false;
        this.imgList.cardFront = "";
      } else if (id == 2) {
        this.cardBack.src = "";
        this.cardBack.isShow = false;
        this.imgList.cardBack = "";
      } else if (id == 3) {
        this.licenseFront.src = "";
        this.licenseFront.isShow = false;
        this.imgList.licenseFront = "";
      }
    },
    // 把拍照的图片显示上去
    showImg(e, id) {
      let _this = this;
      let files = e.target.files[0];
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(files); // 这里是最关键的一步，转换就在这里
      // 判断那一个图片
      if (id == 1) {
        reader.onloadend = function () {
          _this.cardFront.src = this.result;
          _this.cardFront.isShow = true;
        };
      } else if (id == 2) {
        reader.onloadend = function () {
          _this.cardBack.src = this.result;
          _this.cardBack.isShow = true;
        };
      } else if (id == 3) {
        reader.onloadend = function () {
          _this.licenseFront.src = this.result;
          _this.licenseFront.isShow = true;
        };
      }
    },
    // 触发上传材料文件-身份证正面
    getFileData(e) {
      const inputFile = this.$refs.file.files[0];
      this.imgList.cardFront = inputFile;
      this.showImg(e, 1);
    },
    // 触发上传材料文件-身份证背面
    getFileData1(e) {
      const inputFile = this.$refs.file1.files[0];
      this.imgList.cardBack = inputFile;
      this.showImg(e, 2);
    },
    // 触发上传材料文件-行驶证
    getFileData2(e) {
      const inputFile = this.$refs.file2.files[0];
      this.imgList.licenseFront = inputFile;
      this.showImg(e, 3);
    },
    // 最后上传
    uploadFile() {
      let param = this.imgList;
      // console.log(param)
      this.toast1 = Toast.loading({
        message: "上传中...",
        forbidClick: true,
      });
      let formData = new FormData();
      formData.set("cardFront", param.cardFront);
      formData.set("cardBack", param.cardBack);
      formData.set("licenseFront", param.licenseFront);
      upload({
        formData,
      }).then((res) => {
        // this.$message.success("上传成功");
        // console.log(res)
        if (res.rspCode == "000000") {
          this.toast1.clear();
          this.$router.push({
            name: "wait",
          });
        } else {
          Toast(res.rspMsg);
        }
      });
    },
  },
};
</script>

<style lang='scss'>
#wrapper {
  width: 95%;
  margin: auto;
  padding-top: 0.8rem;
  padding-bottom: 3rem;
  // background-color: #fff;
}
.title {
  margin: 0;
  padding: 0;
  font-size: 0.4rem;
}
.msg {
  margin: 0;
  padding: 0;
  font-size: 0.3rem;
  color: #888888;
}
.imgBox {
  margin-top: 1rem;
  .top {
    overflow: hidden;
    font-size: 0.4rem;
    margin-bottom: 0.3rem;
    line-height: 0.8rem;
    .name {
      float: left;
      font-weight: 700;
    }
    .upLoadOrAgain {
      float: right;
      color: #c31e33;
    }
  }
}
.common {
  height: 5rem;
}
.img-list-item {
  position: relative;
  margin: auto;
}
.img-list-item img {
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  border: 0;
}
.img-list-item i.del-img {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/false.png);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
}
.upload-btn {
  margin: auto;
}
input[type="file"] {
  color: transparent;
  opacity: 0;
  width: 100%;
  height: 100%;
}
#wrapper:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.mb_10 {
  margin-bottom: 10px;
}

.zheng {
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/zheng.png);
  background-size: 100% 100%;
}
.fan {
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/fan.png);
  background-size: 100% 100%;
}
.vin {
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/vin.png);
  background-size: 100% 100%;
}

.up {
  width: 90%;
  margin: auto;
  padding: 0.3rem 0;
  border-color: #c41e33;
  border: 1px solid #c41e33;
  text-align: center;
  border-radius: 0.5rem;
  color: #c31e33;
  margin-top: 2rem;
}
</style>


